<template>
  <div>
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form :model="searchForm" ref="serviceForm" slot="adaption-bar" label-position="top" inline>
        <Form-item prop="buCode">
          <Select
            style="width: 100%;"
            :disabled="buCode !== 'CRC'"
            filterable
            v-model="searchForm.buCode"
            placeholder="请选择业务单元"
          >
            <Option v-for="item in buList" :value="item.key" :key="item.key">{{ item.value }}</Option>
          </Select>
        </Form-item>
        <Form-item prop="dcPeriod">
          <Select style="width: 100%;" filterable v-model="searchForm.dcPeriod" placeholder="请选择季度">
            <Option v-for="item in quarterList" :value="item.value" :key="item.value">{{ item.value }}</Option>
          </Select>
        </Form-item>
        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" @click="searchValueSet()" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <Tabs v-model="tabKey" class="tabs-app">
      <TabPane label="数字化覆盖度现状" name="status" class="tab-pane">
        <status v-if="!loading" needPermission :buCode="buCodeForTitle" :dcPeriod="dcPeriodForTitle"></status>
      </TabPane>
      <TabPane label="数字化覆盖目标" name="goal" class="tab-pane">
        <goal v-if="!loading" needPermission :buCode="buCodeForTitle" :dcPeriod="dcPeriodForTitle"></goal>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import status from './status.vue'
import goal from './goal.vue'
import { mapState } from 'vuex'
export default {
  components: {
    status,
    goal
  },
  data() {
    return {
      loading: true,
      searchForm: {
        buCode: '',
        dcPeriod: ''
      },
      buCodeForTitle: '',
      dcPeriodForTitle: '',
      tabKey: 'status'
    }
  },
  props: {
    rowbuCode: {
      type: String,
      default: ''
    },
    dcPeriod: {
      type: String,
      default: ''
    },
    buList: {
      type: Array,
      default: () => []
    }
  },
  created() {
    this.searchForm.buCode = this.rowbuCode
    this.searchForm.dcPeriod = this.dcPeriod
    this.searchValueSet()
  },
  computed: {
    ...mapState(['quarterList']),
    userBu() {
      return this.$store.state.userBu.value
    },
    buCode() {
      return this.$store.state.userBu.key
    }
  },

  methods: {
    searchValueSet() {
      this.buCodeForTitle = this.searchForm.buCode.toString()
      this.dcPeriodForTitle = this.searchForm.dcPeriod.toString()
      this.loading = true
      this.$nextTick(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ivu-tabs-bar {
  margin-bottom: 4px;
}
/deep/.self-adaption-wrap .self-adaption-flex {
  padding: 0 5px;
  margin-bottom: 0;
}
</style>
